<template>
  <div class="container exchange">
      <Header />
      <div class="main">
          <h2>{{$t("wallet.turn")}}</h2>
          <div class="form">
              <div class="turn">
                  <div>
                      <span></span>
                      <span></span>
                      <span></span>
                      <span></span>
                  </div>
                  <div>
                      <div>
                          <span :style="{width:locale==='en'?'.3rem':''}">{{$t("wallet.from")}}</span>
                          <p :class="openAnimation?'down':''">{{from}}</p>
                          <img src="../../assets/img/turnto.png" alt="">
                      </div>
                      <div>
                          <span :style="{width:locale==='en'?'.3rem':''}">{{$t("wallet.to")}}</span>
                          <p :class="openAnimation?'up':''">{{to}}</p>
                          <img src="../../assets/img/turnto.png" alt="">
                      </div>
                  </div>
                  <img src="../../assets/img/turn_icon.png" alt="" @click="turnType">
              </div>
              <div class="num">
                  <span>{{$t("wallet.num")}}</span>
                  <input type="number" :placeholder="$t('wallet.enterNum')">
              </div>
              <p>{{$t("wallet.max")}}2.3210WSC</p>
          </div>
          <button @click="turn">{{$t("wallet.turnNow")}}</button>
      </div>
  </div>
</template>

<script>
import Header from './Header.vue';
import { Dialog } from "vant";
export default {
    components:{
        Header
    },
    data(){
        return{
            from:this.$t("wallet.walletAsset"),
            to:this.$t("wallet.wallet"),
            openAnimation:false,
            locale:localStorage.getItem("language")
        }
    },
    methods:{
        turn(){
             // 跳转前是否需要输入密码
          Dialog.confirm({
            className:'dialog',
            title: this.$t("wallet.enterPwd"),
            cancelButtonColor: "#668299",
            confirmButtonColor: "#FED138",
            confirmButtonText: this.$t("wallet.confirm"),
            cancelButtonText: this.$t("wallet.cancel"),
            width:"80%",
            message: `<input type='password' class="pwd" style='border:solid .005rem #668299;width:90%;height:.33rem;padding:0 .1rem;border-radius:.03rem' />`,
            beforeClose: (action, done) => {
              this.pwd = document.getElementsByClassName("pwd")[0].value;
              document.getElementsByClassName("pwd")[0].value = "";
              done();
            }
          })
            .then(async () => {
              /* let res = await AppService.chkPayPwd({
                password: this.pwd
              });
              if (res.code === 0) {
                this.$router.push(url);
              } else {
                Toast("密码错误");
              } */
            })
            .catch(() => {
              // console.log(this.$refs.pwd)
            });
        },
        turnType(){
            //点击后将上下位置调换，同时将转入转出对象调换
            this.openAnimation = true;
            setTimeout(()=>{
                this.openAnimation = false;
                let temp = this.from;
                this.from = this.to;
                this.to = temp;
            },500)
        }
    }
}
</script>

<style lang="scss">
.exchange{
    .main{
        h2{
            font-size: .167rem;
            padding: 0 .15rem;
            color: #fff;
            font-weight: bold;
        }
        .form{
            background: #293946;
            border-radius: .067rem;
            padding: .3rem .2rem;
            margin: .2rem .15rem;
            font-size: .15rem;
            .turn{
                display: flex;
                justify-content: space-between;
                align-items: center;
                >div:nth-of-type(1){
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: space-between;
                    >span{
                        display: block;
                        background: #56738B;
                        border-radius: 50%;
                        height: .05rem;
                        width: .05rem;
                        margin: .05rem 0;
                    }
                    >span:last-child,>span:first-child{
                        height: .0867rem;
                        width: .0867rem;
                        background: #FFD138;
                    }
                }
                >div:nth-of-type(2){
                    flex: 1;
                    margin: 0 .1rem;
                    >div{
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        padding: 0 .08rem;
                        span{
                            margin-right: .18rem;
                        }
                        p{
                            flex: 1;
                            color: #fff;
                        }
                        img{
                            height: .13rem;
                            width: .07rem;
                        }
                    }
                    >div:nth-of-type(1){
                        border-bottom: solid .01rem #668299;
                        padding-bottom: .12rem;
                    }
                    >div:nth-of-type(2){
                        padding-top: .12rem;
                    }
                }
                >img{
                    height: .267rem;
                    width: .267rem;
                }
            }
            .num{
                border-bottom: solid .01rem #668299;
                padding: .05rem 0;
                margin-top: .3rem;
                display: flex;
                span{
                    color: #fff;
                    margin-right: .2rem;
                }
                input{
                    background: transparent;
                    outline: none;
                    color: #fff;
                    font-size: .15rem;
                    flex: 1;
                }
                input::-webkit-input-placeholder {
                    color: #56738B;
                    font-size:.15rem;
                }
                input:-moz-placeholder {
                    color: #56738B;
                    font-size:.15rem;
                }
                input:-ms-input-placeholder {
                    color: #56738B;
                    font-size:.15rem;
                }
            }
            >p{
                font-size: .12rem;
                color: #56738B;
                text-align: right;
                margin-top: .1rem;
            }
        }
        button{
            display: block;
            width: 3.3rem;
            height: .37rem;
            background: #FFD138;
            border-radius: .067rem;
            font-size: .15rem;
            color: #fff;
            margin: .3rem auto;
        }
    }
}
.dialog{
    background: #293946;
    color: #fff;
    border-radius: .067rem;
    >div:nth-of-type(1){
        text-align: left;
        padding: .17rem .2rem;
        font-size: .14rem;
    }
    >div:nth-of-type(2){
        input{
            background: transparent;
            color: #fff;
            // margin: 0 auto;
        }
    }
    >div:nth-of-type(3){
        padding: .07rem 0;
        button{
            background: #293946;
            height: .3rem;
            line-height: .3rem;
            span{
                font-size: .15rem;
            }
        }
        >button:nth-of-type(1)>span{
            color: #668299;
        }
        >button:nth-of-type(2)>span{
            color: #FED138;
        }
    }
    >div:nth-of-type(3)::after{
        border: none;
    }
}

.down{
    animation: turnDown .6s linear;
}
.up{
    animation: turnUp .6s linear;
}
@keyframes turnDown{
    0%{
        transform: translate(0,0);
        opacity: 1;
    }
    100%{
        transform: translate(0,.5rem);
        opacity: 0;
    }
}
@keyframes turnUp{
    0%{
        transform: translate(0,0);
        opacity: 1;
    }
    100%{
        transform: translate(0,-.5rem);
        opacity: 0;
    }
}
</style>